<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="https://unpkg.com/vue@next"></script>

    <div id="todo-list-app">
        <ol>
            <todo-item
                v-for="item in groceryList"
                v-bind:todo="item"
                v-bind:key="item.id"
            >

            </todo-item>
        </ol>
    </div>

    <script>
        const todoList = {
            data(){
                return {
                    groceryList: [
                        {id: 0, text: 'Vegetables'},
                        {id: 1, text: 'Cheese'},
                        {id: 2, text: 'Whatever else humans are supposed to eat'}
                    ]
                }
            }
        }

        const app = Vue.createApp(todoList);

        // param1:组件名称，忽略大小写
        app.component('todo-item', {
            props: ['todo'],
            template: `<li>{{todo.text}}</li>`
        });

        app.mount('#todo-list-app');
    </script>
</body>
</html>
